<template>
    <el-table
      :height="tableHeight" ref="expandTable"
      :cell-style="{'text-align':'center', 'background': '#eead5a'}"
      :header-cell-style="headerStyle"
      :row-key="getRowKey"
      :expand-row-keys="expandKeys"
      :data="tableData"
      :border="true"
      style="width: 100%">
      <el-table-column width="1" type="expand" style="padding: unset">
        <template #default="props">
          <el-table :data="props.row.subList" :border="true">
            <el-table-column label="编码" prop="manufacturerPartNumber" />
            <el-table-column label="名称" prop="manufacturerPartName" />
            <el-table-column label="品牌" prop="manufacturer" />
            <el-table-column label="厂家型号" prop="manufacturerModel" />
            <el-table-column label="是否国产品牌" prop="domestic" />
            <el-table-column label="规格生命周期" prop="specLifeCycle" />
          </el-table>
          <Loading :loading="props.row.subLoading" absolute="true" :tip="loadingText"></Loading>
        </template>
      </el-table-column>
      <el-table-column  prop="internalPartNumber" label="编码" width="130" sortable>
        <template #default="scope">
          <div style="margin-bottom: 10px"> {{ scope.row.internalPartNumber }}</div>
          <div class="hoverable">
             <span  @click="iconClick(scope.row)">
                <el-icon color="#000000"><Plus /></el-icon>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="internalPartName" label="名称" width="110"  sortable/>
      <el-table-column prop="productLine" label="所属产品线" width="130"  sortable/>
      <el-table-column v-for="(item,index) in attributeList" :key="index" :label="item.displayName" :formatter="formatter" :prop="item.atrributeKey" sortable>
        <!--        <template #default="scope">-->
        <!--          <span>{{ getAttributeValue(scope.row.attributeList, item.atrributeKey, scope.$index) }}</span>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column prop="quality" label="质量" width="80"  sortable/>
      <el-table-column prop="deliveryDate" label="交期" width="80"  sortable/>
      <el-table-column prop="performance" label="性能" width="80"  sortable/>
      <el-table-column prop="cost" label="成本"  sortable/>
      <el-table-column prop="reusedRate" label="复用率" width="100"  sortable/>
      <el-table-column prop="quantityOfBuy" label="出货量" width="100"  sortable/>
      <el-table-column prop="preferredLevel" label="优选" width="80"  sortable/>
      <el-table-column prop="ownedOrg" label="编码申请组织" width="140"  sortable/>
    </el-table>
  <Loading :loading="loading" absolute="true" :tip="loadingText"/>
</template>
<script lang="ts">
import * as API from "@/api/pbi/material";
import { getMaterialHeaderStyle} from "@/utils";
import { Loading } from '/@/components/Loading';

export default {
  name: 'OfferingMaterialList',
  components: {Loading},
  props: [],
  data() {
    return {
      loading: false,
      loadingText: '数据正在加载中...',
      headerStyle: getMaterialHeaderStyle(),
      count : 1,
      expandKeys: [],
      searchData: [],
      attributeList: [],
      tableData : []
    };
  },
  created() {
    // this.findTableData();
  },
  computed: {
    tableHeight(){
      let size = window.innerHeight - 330;
      console.log("scroll高度");
      console.log(size);
      return size;
    },
    // getAttributeValue(row, atrributeKey) {
    //   console.log('33445544--' + atrributeKey)
    //   console.log(row)
    //   let attrList = row.attributeList;
    //   if (attrList && attrList.length > 0) {
    //     let attributeInfoList = attrList.filter(a=> {a.atrributeKey === atrributeKey});
    //     if (attributeInfoList.length > 0) {
    //       return attributeInfoList[0].value;
    //     }
    //   }
    //   return 'ffffff';
    // }
  },
  methods: {
    formatter(row, column){
      // console.log(11122222)
      // console.log(row.attributeList)
      // console.log(column.property)
      let attrList = row.attributeList;
      if (attrList && attrList.length > 0) {
        let attributeInfo = attrList.find(a => a.atrributeKey === column.property);
        if (attributeInfo) {
          return attributeInfo.value;
        }
      }
      return '';
    },

    // getAttributeValue(attributeList, atrributeKey, index) {
    //   console.log('index-' + index)
    //   console.log('33445544--' + atrributeKey)
    //   console.log(attributeList)
    //   let attrList = attributeList;
    //   if (attrList && attrList.length > 0) {
    //     let attributeInfoList = attrList.filter(a=> a.atrributeKey === atrributeKey);
    //     if (attributeInfoList.length > 0) {
    //       console.log(attributeInfoList)
    //       return attributeInfoList[0].value;
    //     }
    //   }
    //   return 'ffffff';
    // },
    getRowKey(row) {
      return row.internalPartNumber;
    },
    async iconClick(row) {
      const index = this.expandKeys.indexOf(row.internalPartNumber);
      if (index >= 0) {
        this.expandKeys.splice(index, 1);
      } else {
        this.expandKeys.push(row.internalPartNumber);
        row.subLoading = true;
        try {
          const res = await API.getMPNByIPN({
            internalPartNumber: row.internalPartNumber
          });
          row.subList = res;
        } finally {
          row.subLoading = false;
        }
      }
      // this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
      // console.log("点击")

    },
    async findTableData(classNodeCode, preferred) {
      this.expandKeys = [];
      this.attributeList = [];
      this.loading = true;
      try {
        const res = await API.getPartsByClassification({classNodeCode: classNodeCode, preferred:preferred});
        this.searchData = res;
        this.tableData = res;
        //获取额外的属性字段
        if (res && res.length > 0){
          this.attributeList = res[0].attributeList;
        }
      } finally {
        this.loading = false;
      }
    },
    async filter(queryParams) {
      console.log(this.searchData)
      console.log(queryParams)
      // let newTableData = [];
      // if (queryParams.code != null && queryParams.code != '' && queryParams.code != undefined) {
      //   this.searchData.forEach(item =>{
      //     if (item.internalPartNumber.indexOf(queryParams.code) > -1) {
      //       newTableData.push(item);
      //     }
      //   })
      // }
      // if (queryParams.name != null && queryParams.name != '' && queryParams.name != undefined) {
      //   let filter2Data = []
      //   newTableData.forEach(item => {
      //     if (item.internalPartName.indexOf(queryParams.name) > -1) {
      //       filter2Data.push(item);
      //     }
      //   });
      //   newTableData = filter2Data;
      // }
      this.tableData = this.searchData.filter(a=> {
        if (queryParams.code || queryParams.name) {
          return (queryParams.code && !queryParams.name && a.internalPartNumber.indexOf(queryParams.code) > -1)
            || (!queryParams.code && queryParams.name && a.internalPartName.indexOf(queryParams.name) > -1)
            || (queryParams.code && queryParams.name && a.internalPartNumber.indexOf(queryParams.code) > -1 && a.internalPartName.indexOf(queryParams.name) > -1)
        }
        return true;
      })
      // if ((queryParams.code == null || queryParams.code == '' || queryParams.code == undefined )&&
      //   (queryParams.name == null || queryParams.name == '' || queryParams.name == undefined)) {
      //   this.tableData = this.searchData;
      // } else {
      //   this.tableData = newTableData;
      // }
    }
  }
};
</script>
<style scoped>
  .table-expand {
    width: 1px;
    padding: unset;
  }
  .hoverable {
    cursor: pointer;
}</style>



